<template>
  <el-card class="good-container">
    <template #header>
      <div class="header">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增积分</el-button>
      </div>
    </template>
    <el-table :load="state.loading" :data="state.tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="goodsId" label="积分编号" width="100">
      </el-table-column>
      <el-table-column prop="goodsName" label="积分名">
      </el-table-column>
      <el-table-column prop="goodsIntro" label="积分简介">
      </el-table-column>
      <el-table-column label="积分图片">
        <template #default="scope">
          <img style="width: 100px; height: 100px;" :key="scope.row.goodsId"
            :src="$filters.prefix(scope.row.goodsCoverImg)" alt="积分主图">
        </template>
      </el-table-column>
      <el-table-column prop="stockNum" label="积分库存">
      </el-table-column>
      <el-table-column prop="sellingPrice" label="积分售价">
      </el-table-column>
      <el-table-column label="上架状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.goodsSellStatus == 0">销售中</el-tag>
          <el-tag type="danger" v-else>已下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" style="margin-right: 10px;" @click="handleEdit(scope.row.goodsId)">修改</el-button>
          <el-dropdown size="small" :hide-on-click="false" :hide-timeout="500">
            <el-button type="primary">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="scope.row.goodsSellStatus == 0"><span
                    @click="handleStatus(scope.row.goodsId, 1)">下架</span></el-dropdown-item>
                <el-dropdown-item v-else><span @click="handleStatus(scope.row.goodsId, 0)">上架</span></el-dropdown-item>
                <el-dropdown-item><span @click="handleDel(scope.row.goodsId)">删除</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination background layout="total,prev, pager, next,jumper" :page-sizes="[10, 20, 50, 100]"
      :total="state.total" :page-size="state.pageSize" :current-page="state.currentPage" @current-change="changePage" />
  </el-card>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from 'vue'
import axios from '@/utils/axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const app = getCurrentInstance()
const { goTop } = app.appContext.config.globalProperties
const router = useRouter()
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10 // 分页大小
})
onMounted(() => {
  getGoodList()
})
// 获取轮播图列表
const getGoodList = () => {
  state.loading = true
  axios.get('/goodsForRec/list', {
    params: {
      pageNumber: state.currentPage,
      pageSize: state.pageSize
    }
  }).then(res => {
    state.tableData = res.list
    state.total = res.totalCount
    state.currentPage = res.currPage
    state.loading = false
    goTop && goTop()
  })
}
const handleAdd = () => {
  router.push({ path: '/addIntegral' })
}
const handleEdit = (id) => {
  router.push({ path: '/addIntegral', query: { id } })
}
const handleDel = (id) => {
  ElMessageBox.confirm(
    '确认删除此项?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.get('/deleteGoodsForRecharge/' + id).then(res => {
        console.log(res)
        ElMessage({
          message: '删除成功！',
          type: 'success',
        })
        getGoodList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const changePage = (val) => {
  state.currentPage = val
  getGoodList()
}
const handleStatus = (id, status) => {
  axios.put(`/goodsForRec/status/${status}`, {
    ids: id ? [id] : []
  }).then(() => {
    ElMessage.success('修改成功')
    getGoodList()
  })
}
</script>

<style scoped>
.good-container {
  min-height: 100%;
}

.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>
